<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演出计划</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/show/css/font.css">
    <link rel="stylesheet" href="/show/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/show/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/show/js/xadmin.js"></script>

</head>
<body>
<br>
<div class="layui-input-inline">
    <form class="layui-form" action="/plan/planSearch">
        <div class="demoTable">
            <span style="font-size: 15px">搜索:&nbsp;&nbsp;&nbsp;</span>
            <div class="layui-input-inline">
            <span >
                <select id="searchKey" layui-filter="key" name="searchKey">
                    <option value>--请选择--</option>
                    <option value="planItem" selected>演出计划编号</option>
                    <option value="planStatus">计划状态</option>
                </select>
            </span>
            </div>
            <div class="layui-input-inline">
            <span>
                <input type="text" class="layui-input" name="searchValue" id="searchValue" autocomplete="off"
                       placeholder="输入关键字">
            </span>
            </div>
            <button class="layui-btn" data-type="reload" lay-filter="search" lay-submit=""><i class="layui-icon">&#xe615;</i>搜索</button>

        </div>
    </form>
</div>
<hr>

<button class="layui-btn" onclick="add()" type="button"><i class="layui-icon"></i>新计划</button>
<button class="layui-btn" style="float: right" type="button" id="retrieve" onclick="retrieve()">
    <i class="layui-icon">&#xe640;</i>回收站
</button>
<hr>
<div style="text-align: center">
    <span style="font-size: 20px">当前演出计划</span>
</div>
<table class="layui-table" id="table-using">
    <thead>
    <tr>
        <th>演出计划编号</th>
        <th>状态</th>
    </thead>

    <tbody>
    <tr>

        <td class="td-id" th:text="${list.planUsing.planItem}" onclick="det(this)"></td>

        <td class="td-status" th:if="${list.planUsing.planStatus==1}">
            <span class="layui-btn layui-btn-normal layui-btn-mini">启用</span>
        </td>
        <td class="td-status" th:if="${list.planUsing.planStatus==0}">
            <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">停用</span>
        </td>

    </tr>
    </tbody>
</table>

<div style="text-align: center">
    <span style="font-size: 20px">历史演出计划</span>
</div>
<button class="layui-btn" type="button" id="delMany" onclick="delMany()"><i class="layui-icon">&#xe640;</i>批量删除</button>
<table class="layui-table" id="table-stop">
    <thead>
    <tr>
        <th class="th-check">
            <input type="checkbox" lay-skin="success" name="selectAll"></input>
        </th>
        <th>演出计划编号</th>
        <th>状态</th>
        <th>操作</th>
    </thead>

    <tbody>
    <tr th:each="plan:${list.planListStop}">
        <td class="td-check" >
            <input type="checkbox" lay-skin="success" name="checkbox" th:planItem="${plan.planItem}" >
            <!--                <i class="layui-icon">&#xe605;</i>-->
            </input>
        </td>
        <td class="td-id" th:text="${plan.planItem}" onclick="detail(this)"></td>

        <td class="td-status" th:if="${plan.planStatus==1}">
            <span class="layui-btn layui-btn-normal layui-btn-mini">启用</span>
        </td>
        <td class="td-status" th:if="${plan.planStatus==0}">
            <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">停用</span>
        </td>

        <td class="td-manage" th:if="${plan.planStatus==1}">
            <a onclick="member_stop(this,'10001')" href="javascript:;" title="启用">
                <i class="layui-icon">&#xe601;</i>
            </a>
            <a title="编辑"  onclick="update(this)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="del(this)" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </td>
        <td class="td-manage" th:if="${plan.planStatus==0}">
            <a onclick="member_stop(this,'10001')" href="javascript:;"  title="停用">
                <i class="layui-icon">&#xe601;</i>
            </a>
            <a title="编辑"  onclick="update(this)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="del(this)" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </td>
    </tr>
    </tbody>
</table>
<div class="page">
        <div>
            <a class="prev" th:href="@{/plan/planList(page=${list.prePage})}">&lt;&lt;</a>
            <a class="num" href="/plan/planList">首页</a>
            <span class="current" th:text="${list.curPage}"></span>
            <a class="num" th:href="@{/plan/planList(page=${list.totalPage})}">尾页</a>
            <a class="next" th:href="@{/plan/planList(page=${list.nextPage})}">&gt;&gt;</a>
        </div>
</div>
<script>

    //活动增加
    function add() {
        //访问新增页面地址
        var url = '/plan/plan';
        x_admin_show('新计划',url);
    }

    //活动编辑
    function update(obj) {
        //访问编辑页面地址
        var planItem = $(obj).parents("tr").find("td").eq(1).text();
        var url = '/plan/update?planItem='+planItem;
        x_admin_show('编辑计划',url);
    }

    //查看活动详情
    function detail(obj) {
        //访问编辑页面地址
        var planItem = $(obj).parents("tr").find("td").eq(1).text();
        var url = '/plan/detail?planItem='+planItem;
        x_admin_show('查看计划安排',url);
    }

    //查看活动详情
    function det(obj) {
        //访问编辑页面地址
        var planItem = $(obj).parents("tr").find("td").eq(0).text();
        var url = '/plan/detail?planItem='+planItem;
        x_admin_show('查看计划安排',url);
    }

    //回收站
    function retrieve(obj) {
        //访问回收站页面地址
        var url = '/plan/retrieve';
        x_admin_show('已删除活动',url);
    }

    //全选
    $('input:checkbox[name="selectAll"]').click(function(){
        if($(this).is(':checked')){
            $('input:checkbox').each(function(){
                $(this).prop("checked",true);
            });
        }else{
            $('input:checkbox').each(function(){
                $(this).prop("checked",false);
            });
        }
    });

    //批量删除
    function delMany() {
        var items = '';
        $('[name=checkbox]').each(function () {
            if (this.checked == true) {
                items += $(this).attr("planItem") + ',';
            }
        });
        if (items) {
            layer.confirm('是否删除已选定内容', function (index) {
                $.ajax({
                    url: "/plan/delMany",
                    async: false,
                    type: "POST",
                    dataType: "json",
                    data: {"items": items},
                    success: function (data) {
                        if (data.info == "success") {
                            layer.close(index);
                            //刷新
                            window.location.replace("/plan/planList")
                        } else {
                            layer.msg(data.info, {icon: 5, time: 1000});
                        }
                    }
                })
            });
        }else {
            layer.msg("请选择删除内容",{icon: 7,time:1000});//7
        }
    }


    //单个活动删除
    function del(obj) {
        //访问删除页面地址
        var url = '/plan/del';
        var planItem =$(obj).parents("tr").find("td").eq(1).text();
        layer.confirm('是否删除编号为 '+planItem+' 计划?', function(index){
            $.ajax({
                url: url,
                async: false,
                type: "POST",
                dataType: "json",
                data: {"planItem":planItem},
                success: function (data) {
                    if (data.info=="success"){
                        layer.close(index);
                        //刷新
                        window.location.replace("/plan/planList")
                    }else {
                        layer.msg('删除失败!',{icon: 5,time:1000});
                    }
                }
            })
        });
    }

    function member_stop(obj,id){
        //用户停用启用
        //更改按钮样式

        layer.confirm('确认要启用该计划吗?这样会导致目前的计划停用',function(index){
            var planItem =$(obj).parents("tr").find("td").eq(1).text();
            //发异步把用户状态进行更改
            $.ajax({
                url: "/plan/planStatus",
                async: false,
                type: "POST",
                dataType: "json",
                data: {
                    "planItem":planItem,
                    "planStatus":1
                },
                success: function (data) {
                    //放入了map中，调用info
                    if (data.info == "success") {
                        layer.close(index);
                        //刷新
                        window.location.replace("/plan/planList")
                    } else {
                        layer.msg('启用失败!', {icon: 1, time: 1000});
                    }

                }
            })
        })
    }
</script>
</body>
</html>